<template>
    <div class="page">
        <div class="header">
            <router-link to="/my" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">暑期出行红包</h1>
        </div>
        <div class="red-cont">
            <div class="red-cont-logo">
                <!--<div class="red-cont-logo-showimg looo"><img src="../assets/FLred-envelope-logo.png" alt=""><p>专属红包</p></div>-->
                <div class="red-cont-logo-showimg chassis-btn">
                    <img src="../assets/Redenvelope_022.png" alt="">
                    <div class="chassis-btn-cli" @click="Getenvelogin">
                        <p ><img src="../assets/Redenvelope_04.png" alt=""></p>
                    </div>
                </div>
                <div class="red-cont-logo-showimg"><img src="../assets/FLred-envelope-logorules.png" alt=""></div>
            </div>
            <div class="red-cont-chassis"></div>
        </div>
        <div class="red-rules">
            <p>1.领取红包必须先注册为商城会员，登陆后即可领取；</p>
            <p>2.领取有效期为【2019.7.10-2019.8.31】，使用有效期为【2019.7.10-2019.9.1】；</p>
            <p>3.优惠券每单只可在所属品类下使用一次，无法叠加使用；</p>
            <p>4.红包可在【我的-旅行红包】页面查看详情信息。</p>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import { mapState } from 'vuex'
    import { Toast,MessageBox } from 'mint-ui';
    import wxShare from "../store/wxShare"
    import config from "../store/config"
    import judgeURL from "../store/judgeURL"
    import storage from "../store/localstorage"
    import TicketRole from "../components/TicketRole"
    import Pop from "../components/Pop"
    import store from "../store/store"

    export default {
        name: "My-ticket-other",
        data() {
            return {
                feila:'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/a5b45ee3fe210828e67ddbd40b0e5cebjpg',
                code:'',
                password:'kbx123456',
                tabCurr: 0,
                tabMenu: [{name: '领取'}, {name: '兑换'}],
                ticketList:[],   //type 1折扣 2满减  status 1去完成 2可领取 3已领取 4过期
                shareView: true, //分享
                status:['','去完成','点击领取','已领取','已过期'],
                roleInfoShowState: false
            }
        },
        computed: mapState({
            showPop: state => state.showPop,
        }),
        methods: {
            closeRoleFn(state){
                this.roleInfoShowState = state;
            },
            tabFun(val) {
                this.tabCurr = val;
            },
            //判断用户是否登录
            Getenvelogin(){
                if(!this.$store.state.token){
                    this.$router.push({path:"/my-login"})
                    return;
                }else{
                    /*if(storage.get('partner_id')=='kbx'){
//                        console.log("55555555555")
                        this.$router.push({path:"/home"})
                    }else{

                    }*/
                    this.Getenvelope()
                }
            },

            Getenvelope(){
                let params = {
                    coupon_id:20,
                }
                this.axios.postAll('/GetSummerCoupon',params)
                        .then(res=>{
                    if(res.data.code == '0'){
                        Toast({message: res.data.msg, duration: 1500});
                        this.$router.push({path: "/my-ticket"})
                    }else{
                        Toast({message: res.data.msg, duration: 2000});
                    }
                })
            },
            //获取列表
            /*     getTicketList(){
             this.axios.postAll('/wapcouponlist')
             .then(res=>{
             if(res.data.code == '0'){
             this.ticketList=res.data.data;
             this.ticketList.forEach(item=>{
             item.price=item.price.replace('.00','');
             });
             }

             })
             },*/
            //操作优惠券 分享、领取
            optTicket(index){
                console.log(index);
                if(this.ticketList[index].status==1){
                    this.shareView=!this.shareView;
                    this.share(index);
                }else if(this.ticketList[index].status==2){
                    console.log('领取')
                    this.axios.post('/waporderdiscountuser',{member_id:this.ticketList[index].member_id, order_id:this.ticketList[index].order_id,sharenum:this.ticketList[index].sharenum,coupon_id:this.ticketList[index].id})
                            .then(res=>{
                        MessageBox({
                            title: '提示',
                            message: "旅行红包领取成功，去查看？",
                            confirmButtonText:'确定',
                            showCancelButton: true,
                            closeOnClickModal:false,
                        }).then(res=>{
                            if(res=='confirm'){
                                this.$router.push('/my-ticket')
                            }else{
                                this.ticketList[index].status = 3;
                                return;
                            }
                        });
                    })
                }
            },

            formSubmit: function () {
                var _that = this;
                if (!_that.code) {
                    Toast({message:'请输入CODE', duration: 1000});
                    return false;
                }
                if (!_that.password) {
                    Toast({message:'请输入需领取密码', duration: 1000});
                    return false;
                }
                _that.axios.post('/kbxcoupon',{code:_that.code,pwd:_that.password})
                        .then(res => {
                    this.$router.push({path:"/my-ticket/"})
                })
                .catch(err => console.log(err));
            },

            // 分享
            share() {

                var userinfo = storage.get('userinfo');
                var uid='';
                if(userinfo.member_id){
                    uid=userinfo.member_id;
                }
                var partner_id='fl';
                console.log(partner_id)
                wxShare({
                    title: '快帮行|北美定制游', // 分享标题
                    desc: '快帮行，北美定制游,玩点不一样的', // 分享描述
//                link: config.url+'/quick_help_wap1/#/My-ticket-other-FL/'+this.ticketList[index].goods_id+'?order_id='+this.ticketList[index].order_id+'&uid='+uid+'&partner_id='+partner_id, // 分享链接
                    link: config.url+'/quick_help_wap1/#/Redenvelope/?uid='+uid, // 分享链接新的飞拉旅行的
                    imgUrl:this.feila, // 分享图标
                    debug: false
                }, function () {//分享成功后的回调函数
                    //Toast({message: '分享成功！', duration: 1500});
                    console.log('分享成功')
                });
            },
        },
        mounted(){
//        this.getTicketList();
            this.share();
            store.commit('setshowPop', true);
        },
        /*created(){
         if (!this.$store.state.token) {
         store.commit('setshowPop', true); //请求微信授权
         }

         }*/
    }
</script>

<style lang="scss" scoped>

    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }b

     .h120 {
         height: rpx(60);
         background: $bgcolor1;
     }
    .page{
        /*position: relative;*/
        background-image: url("../assets/Redenvelope_02.jpg");
        background-size: 100%;
        /*background: $bgcolor1;*/
        min-height: 110%;
        background-repeat: no-repeat;
    }
    .red-cont{
    &-logo{
         padding: rpx(0) rpx(35);
         text-align:center;
    &-showimg{
         text-align:center;
    >img{
         width: 100%;
     }
    > p{
          font-size: rpx(100);
          padding-bottom: rpx(60);
          color: #fff;
      }
    }

    }

    }
    .looo{
        padding-left: rpx(10);
    }
    .red-rules{
        padding: rpx(25) rpx(15) rpx(60) rpx(15);
        font-size: rpx(26);
        color: #fff;
    >p{
         padding: rpx(10) rpx(20);
         line-height: rpx(35);
     }
    }
    .chassis-btn{
        position: relative;
        padding-bottom:rpx(100);
    }
    .chassis-btn-cli{
        position: absolute;
        top:68%;
        left:33%;
        width: rpx(240);
        height: rpx(60);
    >p{

     }

    }
    .header{
        display: flex;
        align-items: center;
        padding:rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
    &-btnLeft{
         width: rpx(64);
         height: rpx(64);
         padding-top: rpx(16);
    img{
        width: rpx(32);
        height: rpx(32);
    }
    }
    &-btnRight{
         color: #5D5D5D;
     }
    &-title{
         flex: 1;
         font-size: rpx(36);
         text-align: center;
         font-weight: normal;
     }
    }


    .tab {
        background: $color0;
    &-menu {
         display: flex;
     }
    &-menu-item {
         flex: 1;
         padding: rpx(30) rpx(20);
         text-align: center;
         color: $color5;
         font-size: rpx(32);
         border-bottom: solid $color2 rpx(4);

    &.active {
         color: $color3;
         border-bottom: solid $color3 rpx(4);
     }
    }
    }
    .ticket{
    &-bar{
         width: 100%;
     }
    &-list{
         margin:rpx(30);
    &-item{
         display: flex;
         align-items: center;
         margin-bottom: rpx(20);
         padding: rpx(40) 0;
         background:$color0;
         border-radius: rpx(10);
    &-price{
         width: rpx(180);
         text-align: center;
         color: $color3;
    .num{
        font-size: rpx(62);
    }
    }
    &-info{
         flex: 1;
    &-title{
         padding-bottom: rpx(10);
         font-size: rpx(32);
         font-weight: normal;
     }
    &-desc{
         color:$color5;
     }
    }
    &-opt{
         margin-right: rpx(20);
         text-align: right;
    .btn{
        display: block;
        width: rpx(140);
        height: rpx(60);
        line-height: rpx(60);
        background: $color5;
        border-radius: $radius6;
        color: $color0;
        font-size: rpx(28);
        text-align: center;
    }
    .active{
        background: $color7;
    }
    .success{
        background: $bgcolor1;
        color: #999;
    }
    }
    }
    }
    }

    //项列表
      .list {
          margin: rpx(30);
    &-item {
         display: flex;
         align-items: center;
         overflow: hidden;
         background: $color0;
         padding:rpx(35) rpx(30);
         border-bottom: solid 1px $color2;
    &-input {
         flex: 1;
         display: flex;
         align-items: center;
         font-size: rpx(34);
    input{
        font-size: rpx(34);
        width: 100%;
    }
    }
    }
    }
    .incomeSubmit{
        padding: rpx(60) 0 ;
    &-btn{
         display: block;
         width: 100%;
         height: rpx(100);
         line-height: rpx(100);
         background: $color3;
         border-radius: $radius6;
         color: $color0;
         font-size: rpx(34);
         text-align: center;
     }
    }

    .program-about{
        padding: rpx(30);
    &-img{
         width: 100%;
         height: auto;
     }
    }

    //分享
      .share {
    &-div {
         position: fixed;
         background: rgba(0, 0, 0, .5);
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         z-index: 999;
         width: 100%;
         height: 100%;
         text-align: center;
    &-img {
         margin-top: rpx(30);
         width: rpx(500);
         height: rpx(220);
     }
    }
    }

</style>
